<template>
  <!--<div>
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <div style="max-height: 610px">
          <el-row>
            <el-col :span="12"><div class="grid-content bg-purple">1111</div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light">2222</div></el-col>
          </el-row>
        </div>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>-->
  <div style="height: 100%">
    <!-- 头部 -->
    <div class="my-header">
      <el-row>
        <el-col :span="6">
          <div class="header-title">结账清单</div>
        </el-col>
        <el-col :span="18">
          <div class="header-title">5G新零售收银台</div>
        </el-col>
      </el-row>
    </div>

    <!-- 中间内容区 -->
    <div class="my-main">
      <el-row style="height: 100%">
        <!-- 清单区域 -->
        <el-col :span="6" style="height: 100%;">
          <div class="cart">
            <div class="cart-container">
              <ul class="cart-list">
                <li v-for="(o) in 2" :key="o">
                  <div class="prod-img">
                    <img :src="url" style="width: 100%; height: 100%;">
                  </div>
                  <h3>商品名称商品名称商品名称</h3>
                  <br>
                  <div class="price-volume">
                    <span>
                      <span style="font-size: 16px">￥</span>
                      <span style="font-weight: 700;font-size: 1.458vw;">价格</span>
                    </span>
                    <span class="stepper">
                      <span style="font-size: 16px">x</span>
                      <span style="font-weight: 700;font-size: 1.458vw;">数量</span>
                    </span>
                  </div>
                  <i class="del el-icon-delete"></i>
                </li>
              </ul>
              <div class="order-total">
                <p style="display: none">优惠金额</p>
                <h3>
                  <span>合计</span>
                  <span style="float: right">
                    <span style="font-size: 16px">￥</span>
                    <span style="font-weight: 700;font-size: 1.458vw;">价格</span>
                  </span>
                </h3>
              </div>
            </div>
          </div>
        </el-col>
        <!-- 商品区域 -->
        <el-col :span="17" style="margin-left: 26px; margin-top: -10px">
          <div style="margin-top: 15px;">
            <el-input placeholder="输入商品/条码查询" v-model="keyword" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
          <el-card class="prod-list" :body-style="{ padding: '5px'}" v-for="(o) in 16" :key="o">
            <img :src="url" class="image">
            <div class="prod-list-info">好吃的汉堡,好喝的可乐,香喷喷的薯条</div>
            <div class="prod-list-price">
              <span>￥ 3.5</span>
            </div>
          </el-card>
          <el-button type="danger">上一页</el-button>
          <el-button type="danger">下一页</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 底部按钮区域 -->
    <div class="my-footer">
      <el-row>
        <el-col :span="6">
          <el-button>清空</el-button>
          <el-button type="primary">挂起</el-button>
          <el-button type="danger" @click="pay">收款</el-button>
        </el-col>

        <el-col :span="17" style="text-align: left">
          <el-button>取单</el-button>
          <el-button type="success">会员</el-button>
          <el-button type="warning">折扣/优惠</el-button>
          <el-button type="danger">同步</el-button>
        </el-col>
        <div style="margin-top: 56px">@2021-FH2103部门版权所有</div>
      </el-row>
    </div>

    <!-- 支付收款 -->
    <el-dialog title="结账" :visible.sync="payFormVisible">
      <template>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="现金结算" name="one">现金结算</el-tab-pane>
          <el-tab-pane label="标记收款" name="two">标记收款</el-tab-pane>
          <el-tab-pane label="支付宝" name="alipay">支付宝</el-tab-pane>
          <el-tab-pane label="微信" name="wechat">微信</el-tab-pane>
        </el-tabs>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <div ref="alipayWap" v-html="alipayForm" style="display: none"></div>
  </div>
</template>

<script>
  import {get, post} from '@/api/http.js'

  export default {
    name: "money",

    data() {
      return {
        url: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',

        // 商品列表检索关键字
        keyword:'',

        // 结算商品清单
        prodList:[
          {
            productName:'',
            productPrice:'',
            productNum:'',
          }
        ],

        // 支付收款
        payFormVisible:false,
        activeName:'first',
        alipayForm:'',

      }
    },
    methods:{
      // 支付收款
      pay(){
        this.payFormVisible=true;
      },

      // 支付收款标签点击事件
      handleClick(tab) {
        if(tab.name === 'alipay'){
          get("/pay/do", '')
            .then(res =>{
              console.log(res);
              this.alipayForm = res.data;
              // 防抖避免重复支付
              this.$nextTick(() => {
                // 提交支付表单
                this.$refs.alipayWap.children[0].submit();
                setTimeout(() => {
                  // this.toPayFlag = false;
                }, 500);
              })
            })
            .catch(err =>{})
        }
      }
    }
  }
</script>

<style scoped>
  .my-header {
    background-color: red;
    width: 100%;
    height: 5%;
    text-align: center;
  }

  .my-main {
    background-color: #F2F6FC;
    width: 100%;
    height: 80%;
    text-align: center;
  }

  .my-footer {
    margin-top: 30px;
  }

  .header-title {
    font-size: x-large;
    color: white;
    font-weight: 700
  }

  .prod-list-info {
    margin-top: -98px;
    margin-left: 105px;
    width: 133px;
    min-height: 60px;
  }

  .prod-list-price {
    margin-top: 18px;
    margin-left: 93px;
    width: 66px;
    position: absolute;
  }

  .image {
    display: block;
    width: 100px;
    height: 100px;
  }

  .prod-list {
    margin: 5px;
    width: 245px;
    float: left;
    height: 111px
  }

  .cart {
    position: absolute;
    width: 25.167vw;
    height: calc(100vh - 9.5vw);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-right: .833vw solid #F56C6C;
  }

  .cart-container {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
  }

  .cart-list {
    -webkit-box-flex: 1;
    flex: 1;
    overflow-y: auto;
    list-style: none;
    margin-left: -30px;
  }

  .cart-list li {
    position: relative;
    padding: 0.5vw;
    min-height: 6.4vw;
  }

  .prod-img {
    position: relative;
    width: 5.25vw;
    height: 5.25vw;
    float: left;
    margin-right: .625vw;
  }

  .cart-list li h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: .313vw;
    padding-right: 3.125vw;
    margin-top: 0px;
  }

  .price-volume {
    font-size: 1.25vw;
    line-height: 2.5vw;
    zoom: 1;
    text-align: left;
  }

  .del {
    position: absolute;
    right: 0.66vw;
    top: 0.5vw;
    font-size: 1.875vw;
    color: #ff3d47;
    line-height: 1.875vw;
  }

  .stepper {
    float: right;
  }

  .cart .cart-container .order-total {
    background: #f7f7f7;
    position: relative;
    padding: .833vw;
    line-height: 1.563vw;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .order-total p {
    font-size: 1.25vw;
    color: #5c5c5c;
    line-height: 1.667vw;
  }

  .order-total h3 {
    font-size: 1.25vw;
    color: #212121;
    margin-top: .833vw;
    line-height: 1.667vw;
    text-align: left;
  }
</style>
